<template>
  <view class="index">
    <!-- 轮播图 -->
    <view class="swiper">
      <u-swiper :height="260" :list="list1"></u-swiper>
    </view>
    <!-- 轮播图 -->
    <!-- 金刚区 -->
    <view class="kim">
      <view class="kimson" @click="toaskfor()">
        <image src="/static/index/tea.png" class="kimsonimg" />
        <view class="kimtit">自取</view>
      </view>
      <view class="kimline"></view>
      <view class="kimson" @click="toaskfor()">
        <image src="/static/index/takeout.png" class="kimsonimg" />
        <view class="kimtit">外卖</view>
      </view>
    </view>
    <!-- 金刚区 -->
    <!-- #ifdef H5 -->
    <view class="bodyh5"></view>
    <!-- #endif -->
    <!-- #ifdef APP -->
    <view class="bodyapp"></view>
    <!-- #endif -->
    <!-- 积分 -->
    <view class="score">
      <view class="scoreleft">
        <view class="scoretit">我的积分<text class="scorenum">{{ userdata.score }}</text></view>
        <view class="scoretext" @click="toscorestore()">
          进入积分商城兑换亲雪券及周边好礼
          <image src="/static/index/right.png" class="scoreimg" alt="" />
        </view>
      </view>
      <view class="scoreright" @click="tovip()">
        <image class="scoreewm" src="/static/index/ewm.png" mode="widthFix" />
        <view class="scoremerr">会员码</view>
      </view>
    </view>
    <!-- 积分 -->
    <!-- 商城 -->
    <view class="store">
      <view class="storeleft" @click="tonull()">
        <view>
          <view class="storetitbox">
            <image src="/static/index/bag.png" mode="widthFix" class="storebag" />
            <view class="storetit">奈雪的茶商城</view>
          </view>
          <view class="storetext">优质茶礼盒，网红零食</view>
          <image src="/static/index/bagbg.png" class="bagbg" mode="widthFix" />
        </view>
      </view>
      <view class="storeright">
        <view class="storetop" @tap="buytea()">
          <view class="give">
            <image src="/static/index/bagsmall.png" class="givebag" mode="widthFix" />
            <view class="givetit">买茶送包</view>
          </view>
        </view>
        <view class="storebot" @tap="vipticket()">
          <view class="give">
            <image src="/static/index/quan.png" class="givebag" mode="widthFix" />
            <view class="givetit">会员券包</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商城 -->
    <!-- 会员新鲜事 -->
    <view class="member">
      <view class="membertop">
        <view class="memtit">会员新鲜事</view>
        <image src="/static/index/rightcircle.png" class="memright" mode="widthFix" />
      </view>
      <view class="membody">
        <view class="memson">
          <image src="/static/index/memimg.png" class="memimg" mode="widthFix" />
        </view>
      </view>
    </view>
    <!-- 会员新鲜事 -->
  </view>
</template>

<script setup>
  import {
    computed,
    ref,
    onMounted
  } from "vue";
  import {
    useStore
  } from "vuex";
  import {
    news
  } from "../../request/API/index";
  import {
    ensureHttp
  } from "../../utils/public";

  const newsimg = ref("");
  const list1 = ref([
    "/static/index/swiper1.jpg",
    "/static/index/swiper2.jpg",
    "/static/index/swiper3.jpg",
  ]);

  const store = useStore();
  const userdata = computed(() => store.state.userdata);

  //在页面加载时执行
  onMounted(() => {
    // news().then((res) => {
    //   // console.log(res.data[0].image);
    //   newsimg.value = res.data[0].image;
    // });
  });

  // 跳转
  const buytea = () => {
    uni.navigateTo({
      url: "/pages/index/buytea",
    });
  };
  const vipticket = () => {
    uni.navigateTo({
      url: "/pages/index/vipticket",
    });
  };
  const tovip = () => {
    uni.navigateTo({
      url: "/pages/user/vip",
    });
  };
  const toscorestore = () => {
    uni.navigateTo({
      url: "/pages/user/scorestore",
    });
  };
  const toaskfor = () => {
    uni.switchTab({
      url: "/pages/order/order",
    });
  };
  const tonull = () => {
    uni.showToast({
      title: "暂未开放",
      icon: "none",
    });
  };
</script>

<style lang="scss">
  .index {
    width: 100%;
    box-sizing: border-box;
    background-color: #f0f8fa;
    padding-bottom: 100rpx;

    // 轮播图
    .swiper {
      width: 100%;
      position: relative;

      & u-swiper {
        width: 100%;
        height: 100%;
      }
    }

    // 轮播图
    // 金刚区
    .kim {
      width: 94%;
      height: 220rpx;
      border-radius: 16rpx;
      position: absolute;
      background-color: #fff;
      top: 38%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: #e8edef 0rpx 0rpx 10rpx;
    }

    .kimson {
      width: 49%;
      text-align: center;
      box-sizing: border-box;

      .kimtit {
        font-weight: bold;
        color: #5c5c5d;
        font-size: 1rem;
      }
    }

    .kimsonimg {
      width: 100rpx;
      height: 100rpx;
    }

    .kimline {
      width: 2rpx;
      height: 60%;
      background-color: #eeeeee;
    }

    // 金刚区
    .bodyh5 {
      height: 140rpx;
    }

    .bodyapp {
      height: 13.2vh;
    }

    // 积分
    .score {
      width: 94%;
      margin: auto;
      aspect-ratio: 3;
      border-radius: 16rpx;
      background-color: #fff;
      box-shadow: #e8edef 0rpx 0rpx 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0rpx 20rpx;
      box-sizing: border-box;

      .scoreleft {
        font-size: 0.7rem;

        .scoretit {
          margin-bottom: 10rpx;

          .scorenum {
            font-size: 1rem;
            font-weight: bold;
            margin-left: 10rpx;
          }
        }

        .scoretext {
          display: flex;

          .scoreimg {
            width: 26rpx;
            height: 30rpx;
          }
        }
      }

      .scoreright {
        text-align: center;

        .scoreewm {
          width: 60rpx;
          height: 60rpx;
        }

        .scoremerr {
          color: #abb90f;
        }
      }
    }

    // 积分
    // 商城
    .store {
      width: 94%;
      margin: auto;
      margin-top: 24rpx;
      aspect-ratio: 2.1;
      border-radius: 16rpx;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .storeleft {
        width: 49%;
        height: 100%;
        background-color: #f2f2e6;
        position: relative;
        padding: 20rpx;
        box-sizing: border-box;

        .storetitbox {
          display: flex;
          align-items: center;
          margin-top: 10rpx;

          .storebag {
            width: 40rpx;
            height: 40rpx;
          }

          .storetit {
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 10rpx;
          }
        }

        .storetext {
          font-size: 0.7rem;
          color: #5c5c5d;
          margin-top: 20rpx;
          margin-left: 30rpx;
        }

        .bagbg {
          width: 180rpx;
          height: 220rpx;
          position: absolute;
          bottom: 0;
          right: 40rpx;
        }
      }

      .storeright {
        width: 49%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 0.8rem;

        .storetop {
          width: 100%;
          height: 48%;
          background-color: #fdf3f2;
          display: flex;
          align-items: center;
          color: #777576;
        }

        .give {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-left: 20rpx;

          .givebag {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }
        }

        .storebot {
          width: 100%;
          height: 48%;
          display: flex;
          align-items: center;
          color: #777576;
          background-color: #fcf6d4;
        }
      }
    }

    // 商城
    // 会员新鲜事
    .member {
      width: 94%;
      margin: auto;
      margin-top: 24rpx;

      .membertop {
        width: 94%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .memtit {
          font-size: 1.1rem;
          font-weight: bold;
        }

        .memright {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .membody {
        width: 100%;

        .memson {
          width: 100%;
          height: 250rpx;
          background-color: #fff;
          border-radius: 16rpx;
          margin-top: 20rpx;
          box-shadow: #e8edef 0rpx 0rpx 10rpx;

          .memimg {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
        }
      }
    }

    // 会员新鲜事
    .nodata {
      text-align: center;
      font-size: 40rpx;
      padding: 25rpx 0;
      box-sizing: border-box;
      font-weight: bold;
    }
  }
</style>